<template>
    <editor :id="editorId" v-model="initValue"  @onChange="changeHandler"  @onKeyPress="keyHandler" :init="init"></editor>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
export default {
    name: 'myeditor',
    components: {
        Editor
    },
    data(){
        return {
            init: {
                language_url: '/tinymce/zh_CN.js',// 语言包的路径
                language: 'zh_CN',//语言
                skin_url: '/tinymce/skins/ui/oxide',// skin路径，注意这个，很多网上教程都是skins/lightgray，但是发现其实并没有这个玩意儿
                height: 300,//编辑器高度
                branding: false,//是否禁用“Powered by TinyMCE”
                menubar: true,//顶部菜单栏显示
                images_upload_handler: (blobInfo, success, failure) => {
                        const img = "data:image/jpeg;base64," + blobInfo.base64();
                        success(img);
                },
                plugins: 'wordcount table  link image',
                toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo| image removeformat',
            },
            initValue:''
        }
    },
    model: {
        prop: 'editorConent',
        event: 'change'
    },
    props:{
        editorId:{
            type:String,
            default:'tinymce'
        },
        editorConent:{
            type:String,
            default:''
        }
    },
    watch:{
        editorConent:{
            immediate:true,
            handler:function (e){
                this.initValue = e;
            }
        }
    },
    mounted(){
        tinymce.init({})
    },
    methods: {
        keyHandler(){
            this.$emit('change', this.initValue);
        },
        changeHandler() {
            this.$emit('change', this.initValue);
        }
    }
}
</script>
